<!--
 * @Author: WuFeng <763467339@qq.com>
 * @Date: 2022-04-12 18:47:17
 * @LastEditTime: 2023-06-06 15:53:33
 * @LastEditors: WuFeng <763467339@qq.com>
 * @Description: 新建 / 编辑 页面
 * @FilePath: \vue3-element-plus-web\src\views\SysManage\GenderCode\components\Drawer\settings.vue
 * Copyright 版权声明
-->
<template>
  <div class="drawer-container">
    <div class="main">
      <el-tabs v-model="activeTab" type="border-card" @tab-click="handleClick">
        <el-tab-pane label="基本配置" name="baseSet">
          <BaseSet></BaseSet>
        </el-tab-pane>
        <el-tab-pane label="择取字段" name="fieldSelectSet">
          <FieldSelectSet></FieldSelectSet>
        </el-tab-pane>
        <el-tab-pane label="字段设置" name="fieldSet">
          <FieldSet></FieldSet>
        </el-tab-pane>
        <el-tab-pane label="搜索区配置" name="searchSet">
          <SearchSet></SearchSet>
        </el-tab-pane>
        <el-tab-pane label="列表区配置" name="listSet">
          <ListSet></ListSet>
        </el-tab-pane>
        <el-tab-pane label="表单配置" name="formSet">
          <FormSet></FormSet>
        </el-tab-pane>
      </el-tabs>
    </div>
    <FieldSetAside v-if="showFieldSet"></FieldSetAside>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import BaseSet from './settingsComponents/BaseSet.vue'
import FieldSelectSet from './settingsComponents/FieldSelectSet.vue'
import FieldSet from './settingsComponents/FieldSet.vue'
import FieldSetAside from './settingsComponents/FieldSetAside.vue'
import SearchSet from './settingsComponents/SearchSet.vue'
import ListSet from './settingsComponents/ListSet.vue'
import FormSet from './settingsComponents/FormSet.vue'

export default {
  name: 'Create',
  components: {
    BaseSet,
    FieldSelectSet,
    FieldSet,
    FieldSetAside,
    SearchSet,
    ListSet,
    FormSet
  },
  computed: {
    ...mapGetters([
      'drawerCurrent',
      // 选择的表集合
      'genderCodeTableRowSet',
      // 模块配置信息
      'genderCodeModuleInfo'
    ]),
    drawerType: function() {
      return this.drawerCurrent.drawerType
    }
  },
  data() {
    return {
      // 默认选项卡
      activeTab: 'baseSet',
      // 是否展示【设置面板区】
      showFieldSet: false,
      temp: {
      },
      rules: {
        internal: [
          { required: true, message: '请输入监控间隔', trigger: 'change' }
        ]
      }
    }
  },
  watch: {
    // 选择的表集合
    genderCodeTableRowSet: {
      handler: function(val, oldVal) {
      },
      deep: true
    },
    // 模块配置信息
    genderCodeModuleInfo: {
      handler: function(val, oldVal) {
      },
      deep: true
    }
  },
  async created() {
    // 列表传过来的数据
    const pageParams = this.drawerCurrent.params.pageParams || []
    // 设置选择的表集合
    this.$store.dispatch('SetTableRowSet', pageParams)
    // drawer loadding 状态 打开
    this.$store.dispatch('SetDrawerloading', true)
    // 获取表信息
    await this.$store.dispatch('GetTableRowSetInfo', true)
    // drawer loadding 状态 关闭
    this.$store.dispatch('SetDrawerloading', false)
  },
  mounted() {

  },
  methods: {
    // 点击选项卡
    handleClick(tab, event) {
      const index = Number(tab.index)
      // 如果是字段设置选项卡， 展示【设置面板区】
      if (index === 2) {
        this.showFieldSet = true
      } else {
        this.showFieldSet = false
      }
    },
    // 提交表单
    submitForm() {
      return this.$refs['dataForm'].validate()
    },
    // 获取表单数据
    getFormData() {
      return this.genderCodeModuleInfo
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.drawer-container{
  display: flex;
  .main{
    flex: 1;
    .content{
      .title{
        margin: 0;
        font-size: 16px;
      }
    }
  }
}
</style>
